<template>
    <div class="iot_userUp">
        <div class="iot_userLogon">
            <div>
                <p><a href="" @click.prevent="">{{ UserName || '点击右上角登录'}}</a></p>
            </div>
            <span @click="showUp">设置</span>
        </div>
        <van-popup v-model:show="show" :style="{ padding: '20px' }">
          <DeleteAccount></DeleteAccount>
        </van-popup>
    </div>
    <div class="iot_UserDown">
        <van-tabs v-model:active="active" color="#27ba9b">
        <van-tab title="全部"  ><div class="iot_UserContent">空空如也~</div></van-tab>
        <van-tab title="待付款"><div class="iot_UserContent">空空如也~</div></van-tab>
        <van-tab title="待发货"><div class="iot_UserContent">空空如也~</div></van-tab>
        <van-tab title="待收货"><div class="iot_UserContent">空空如也~</div></van-tab>
        <van-tab title="待评价"><div class="iot_UserContent">空空如也~</div></van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { inject,computed,ref } from 'vue';
import DeleteAccount from './DeleteAccount.vue';
import { h } from 'vue'
import { ElMessage } from 'element-plus'
export default {
    name:'UserPage',
    components:{DeleteAccount},
    setup(){
      const Goods = inject('Goods')
      let UserName = computed(()=>{
          if(Goods[15]){
              return Goods[15].username
          }else{
              return false
          }
      })
      let show = ref(false)
      function showUp(){
        if(Goods[15].length == 0){
          show.value = true
        }else{
          ElMessage({
                message: h('p', { style: `line-height: 1; font-size: 14px; color:#f56c6c` }, [
                h('i', null, '登录状态下无法进入设置'),
                ]),
                })
        }
      }
      return {UserName,show,showUp}
    }
}
</script>

<style scoped>
p{
    margin: 0;
}
a{
    color: white;
}
.iot_userUp {
  position: absolute;
  top: -1px;
  width: 100%;
  height: 170px;
  background-image: url(../assets/icons/logo/center_bg.png);
  background-size: cover;
  position: relative;
}
.iot_userUp .iot_userLogon {
  padding: 20px 15px;
  display: flex;
  align-items: center;
  color: white;
}
.iot_userUp .iot_userLogon div {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.iot_userUp .iot_userLogon div p:nth-child(1) {
  font-size: 18px;
}
.iot_userUp .iot_userLogon::before {
  position: relative;
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #fff;
  background-image: url(../assets/icons/logo/headSculpture.png);
  background-size: 38px 38px;
  background-repeat: no-repeat;
  background-position: 6px 6px;
}
.iot_userUp .iot_userLogon span {
  font-size: 20px;
  position: absolute;
  top: 45.5px;
  right: 15px;
  transform: translate(0, -50%);
  cursor: pointer;
}
.iot_UserDown{
    position: relative;
    z-index: 1;
    width: 100%;
    top: -20px;
}
.iot_UserContent{
    margin-top: 40px;
}
</style>